<template>
  <div class="body">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">添加新图书</h3>
      </div>
      <form class="panel-body form-inline">
        <div class="input-group">
          <div class="input-group-addon">书名</div>
          <input
            type="text"
            class="form-control"
            placeholder="请输入书名"
            v-model="bookname"
          />
        </div>

        <div class="input-group">
          <div class="input-group-addon">作者</div>
          <input
            type="text"
            class="form-control"
            placeholder="请输入作者"
            v-model="author"
          />
        </div>

        <div class="input-group">
          <div class="input-group-addon">出版社</div>
          <input
            type="text"
            class="form-control"
            placeholder="请输入出版社"
            v-model="publisher"
          />
        </div>

        <button class="btn btn-primary" @click.prevent="fn">添加</button>
      </form>
    </div>

    <!-- 图书的表格 -->
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>Id</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.bookname }}</td>
          <td>{{ item.author }}</td>
          <td>{{ item.publisher }}</td>
          <td>
            <a href="javascript:;" class="del" @click="overFn(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
// todo axios 实现图书管理案例
//  安装 bootstrap  需要安装3的版本  yarn add bootstrap@3
//  导入 bootstrap的css文件美化样式
import "bootstrap/dist/css/bootstrap.css";
import axios from "axios";
// 接口地址： https://www.showdoc.com.cn/1834761734600444/8449559255355128
axios.defaults.baseURL = "http://ajax-api.itheima.net";
export default {
  data() {
    return {
      list: [],
      bookname: "",
      author: "",
      publisher: "",
    };
  },
  created() {
    //初始化调用函数请求数据
    this.getList();
  },
  methods: {
    async getList() {
      const { data: res } = await axios.get("/api/books");
      console.log(res.data);
      //给素组赋值渲染
      this.list = res.data;
    },
    //删除图书功能
    async overFn(Id) {
      console.log(Id);
      await axios.delete(`/api/books/${Id}`);
      //删除后调用函数请求新数据刷新页面
      this.getList();
    },
    //添加图书
    async fn() {
      await axios.post("/api/books", {
        bookname: this.bookname,
        author: this.author,
        publisher: this.publisher,
      });
      //清除表单值
      this.bookname = "";
      this.author = "";
      this.publisher = "";
      //增加后调用函数请求新数据刷新页面
      this.getList();
    },
  },
};
</script>

<style scoped>
.body {
  padding: 15px;
}
</style>
